<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>${article.title }</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-sm-3">
				<br>
				<div class="thumbnail">
					<img src="resources/images/tou.png" alt="头像">
					<div class="caption">
						<h3 align="center">张晨刚</h3>
						<p align="center">编写代码,改变世界</p>
						<p align="center">
							<a href="#" class="btn btn-primary" role="button">联系博主</a> <a
								href="#" class="btn btn-default" role="button">关注博主</a>
						</p>
					</div>
				</div>
				<div class="list-group">
					<a href="#" class="list-group-item active"><span
						class="glyphicon glyphicon-star"></span> 热门文章 </a>
					<c:forEach items="${hotArticles }" var="ha">
						<a href="article/${ha.id }/show" class="list-group-item"><span
							class="glyphicon glyphicon-thumbs-up badge">&nbsp;${ha.praise }</span>${ha.title}&nbsp;&nbsp;
						</a>
					</c:forEach>
				</div>
			</div>
			<div class="col-sm-9">
				<div class="row">
					<div class="col-sm-12">
						<br>
						<div class="row">
							<h2 class="post-title" align="center">${article.title }</h2>
						</div>
						<br>
						<div class="row">
							<div class="panel panel-default">
								<div class="panel-body">${article.content }</div>
							</div>
						</div>
						<nav>
							<ul class="pager">
								<li class="previous"><a
									href="article/${article.id }/previous"><span
										aria-hidden="true">&larr;</span> 上一篇</a></li>
								<li class="next"><a href="article/${article.id }/next">下一篇
										<span aria-hidden="true">&rarr;</span>
								</a></li>
							</ul>
						</nav>
						<div class="row">
							<form method="post" action="article/comment">
								<input type="hidden" name="user.id" value="0${loginUser.id }">
								<input type="hidden" name="commentUser.id"
									value="${article.user.id }"> <input type="hidden"
									name="article.id" value="${article.id }">
								<div class="col-sm-11">
									<input type="text" class="form-control" id="content"
										name="content" placeholder="写下你对这篇文章的看法">
								</div>
								<div class="col-sm-1">
									<button class="btn btn-default">评论</button>
								</div>
							</form>
						</div>
						<br>
						<div class="row">
							<div class="col-sm-2 panel panel-default">${commentCount }&nbsp;条评论</div>
							<div class="col-sm-8"></div>
							<div class="col-sm-2">
								<a>最新</a> <a>最早</a> <a>最热</a>
							</div>
						</div>
						<c:if test="${empty comments }">
							<div class="row">
								<div class="col-md-12">
									<div class="panel panel-danger">
										<div class="panel-heading">
											<h4 align="center">
												<span class="glyphicon glyphicon-pushpin"></span>
												&nbsp;&nbsp;没有更多评论
											</h4>
										</div>
									</div>
								</div>
							</div>
						</c:if>

						<c:forEach items="${comments }" var="comment">
							<div class="row">
								<div class="col-sm-1">

									<img src="${comment.user.avatar }" height="50px" width="50px"
										alt="头像" class="img-rounded">
								</div>
								<div class="col-sm-11">
									<div class="alert alert-success">
										<p style="font-size: 20px">${comment.user.username }<c:if
												test="${comment.user.id == article.user.id }">&nbsp;(作者)</c:if>
											<c:if test="${comment.commentUser.id != article.user.id }">&nbsp;回复&nbsp;${comment.commentUser.username}</c:if>
										</p>
										<p style="padding-left: 10px">${comment.content }</p>
										<div class="row">
											<div class="col-xs-4"></div>
											<div id="praise${comment.id }" style="float: right;">
												<span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;赞<b
													id="praisesum${comment.id }">${comment.praise }</b>&nbsp;&nbsp;&nbsp;
											</div>
											<div id="huifu${comment.id }" style="float: right;">
												<span class="glyphicon glyphicon-comment"></span>&nbsp;回复&nbsp;&nbsp;&nbsp;
											</div>
											<div style="float: right;">
												<span class="glyphicon glyphicon-calendar"></span>
												<fmt:formatDate value="${comment.time }"
													pattern="yyyy年MM月dd日" />
												&nbsp;&nbsp;
											</div>
										</div>

										<div class="row" id="text${comment.id }" hidden="true">
											<br>
											<form method="post" action="article/comment">
												<input type="hidden" name="user.id"
													value="0${loginUser.id }"> <input type="hidden"
													name="commentUser.id" value="${comment.user.id }">
												<input type="hidden" name="article.id"
													value="${article.id }">
												<div class="col-sm-10">
													<input type="text" class="form-control" id="content"
														name="content" placeholder="写下你对该评论的看法">
												</div>
												<div class="col-sm-1">
													<button class="btn btn-default">评论</button>
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</c:forEach>
						<nav class="pull-right">
							<ul class="pagination pagination-lg">
								<li><a href="./${url }?pageNo=${pageNo - 1}"
									aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
								</a></li>
								<c:forEach begin="0" end="9" var="a">
									<c:set var="apageNo">
										<fmt:formatNumber type="number"
											value="${(pageNo - pageNo%10)/10 }" maxFractionDigits="0"
											pattern="#" />${a%10}
							</c:set>
									<c:if test="${apageNo != 0 }">
										<li <c:if test="${pageNo == apageNo }">class="active"</c:if>><a
											href="./${url }?pageNo=${apageNo}">${apageNo } </a></li>
									</c:if>
								</c:forEach>
								<li><a href="./${url }?pageNo=${pageNo + 1}"
									aria-label="Next"> <span aria-hidden="true">&raquo;</span>
								</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		var huifu = $("div[id^='huifu']");
		var text = $("div[id^='text']");
		huifu.each(function() {
			$(this).click(function() {
				var text = $(this).attr("id").replace("huifu", "text");
				$("#" + text).slideToggle('show', function() {
				});

			});
		});
		var praise = $("div[id^='praise']");
		praise.each(function() {
			$(this).click(
					function() {
						$.ajax({
							url : 'article/comment/praise/'
									+ $(this).attr("id").replace("praise", ""),// 跳转到 action    
							type : 'get',
							success : function(data) {
							}
						});
						var praisesum = $(this).attr("id").replace("praise",
								"praisesum");
						$("#" + praisesum).html(
								addOne(parseInt($("#" + praisesum).text())));
					});
		});

		function addOne(num) {
			return num + 1;
		}
	</script>
</body>
</html>